<template>
  <div>
    <ul>
      <!-- 数组 -->
      <li v-for="(item, index) in arr" :key="index">{{ item }} {{ index }}</li>
    </ul>
    <button @click="reverse">翻转</button>
    <button @click="slice">截取前3个</button>
    <button @click="join">字面量方式修改第一个元素的值</button>
  </div>
</template>

<script>
// 目标：v-for更新检测问题
// 必须用数组方法，影响原数组，才能到时v-for更新




export default {

  data () {
    return {
      arr: ['姐姐', '妹妹', '弟弟', '哥哥'],


    }
  },
  methods: {
    reverse () {
      this.arr.reverse()//可以影响原数组响应式
    },
    slice () {
      this.arr.slice(0, 2)//不影响
    },

    join () {

      this.arr[0] = 1000//确实是有改变但是没有渲染到页面上去

      // 原因：vue框架，劫持了“数组的方法”在原数组方法上，进行了二次改写（数组方法’影响元数字‘才会导致v-for更新页面

      // // 解决办法
      // 1.vue提供的一个方法(第一个位置修改目标，第二个位置修改下标，第三个赋值)
      this.$set(this.arr, 0, 1000)//第一个位置修改目标，第二个位置修改下标，第三个赋值

      // 2.数组splice方法
      // this.arr.splice(0, 1, 1000)//删除下标为0的一个数组，等于1000

      // 3.直接给arr数组全部冲掉--内存地址变化--vye也会监测到arr变量本身改变--更新
      // let b = [...this.arr]//把上面的数组拿出来展开运算符
      // b[0] = 1000//修改b的小标为0给他1000
      // this.arr = b

    }

  }
}
</script>

<style>
</style>
